<!DOCTYPE html>
<html lang="en">

<head>
    <title>选择挑战房间</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <link rel="stylesheet" href="../../css/public.css">
    <style>
        .register_bg {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: url('../../images/reg/bg.png') center no-repeat;
            background-size: 100%;
            z-index: 1;
        }




        .home_zhangdui_nav {
            padding-left: 15%;
            overflow: hidden;
            background: #021349 url('../../images/reg/back.png') 10px center no-repeat;
            background-size: .7rem;
            position: relative;
        }

        .search {
            margin-top: 5px;
            float: right;
            height: 45px;
            width: 45px;
            margin-right: 5px;
            color: #FAE7A5;
            background: url(../../images/home/search.png)center no-repeat;
            background-size: 0.6rem;
        }

        .room {
            width: 100%;
            margin: 0 auto;
            margin-top: .1rem;
        }

        .room ul {
            width: 100%;
            height: 12500px;
            margin-left: 2.5%;
        }

        .room ul li {
            float: left;
            width: 30%;
            height: 105px;
            margin-right: 2.5%;
            margin-bottom: 16px;
            position: relative;
        }

        .bg_room_bottom {
            background: url(../../images/home/bg_room_bottom.png) no-repeat;
            background-size: 100% 100%;
        }

        .bg_room_bottom1 {
            background: url(../../images/home/bg_room_bottom1.png) no-repeat;
            background-size: 100% 100%;
        }

        .number {
            width: 60%;
            text-align: center;
            position: absolute;
            top: 20%;
            left: 20%;
            color: #BFC1F2;
            font-size: .45rem;
        }

        .vs {
            width: 20px;
            height: 25px;
            display: inline-block;
            background: url(../../images/home/icon_team_guess_record_vs.png) no-repeat;
            background-size: 0.5rem;
            margin-left: 15%;
            margin-right: 15%;
        }

        .room_number {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            font-size: 12px;
            color: #FFCD29;
            line-height: 140px;
        }

        .sofa {
            width: 13px;
            height: 12px;
        }

        .model {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            display: none;
        }

        .name_model>div {
            width: 250px;
            height: 220px;
            background: #1b1d68;
            margin: 0 auto;
            margin-top: 50%;
            text-align: center;
            font-size: .5rem;
            color: #eae3ff;
            z-index: 11;

        }

        .bg_room_bottom2 {
            background: url(../../images/home/my.png) no-repeat;
            background-size: 100% 100%;
        }

        .pwd {
            position: absolute;
            bottom: 10px;
            left: 20%;
            color: #4ec9b0;
        }

        .seachContain {
            top: 0;
            position: absolute;
            height: 100%;
            height: 100%;
            right: 0;
            left: 50px;
            background: #1C1C51;
        }

        .searchContent {
            background: #1C1C51 url(../../images/home/searchClick.png) 95% center no-repeat;
            background-size: 25px;
            width: 100%;
            height: 100%;
            /* margin-top: 5%; */
            border: 0;
            color: #7E85C2;
            box-sizing: border-box;
            padding-left: 5px;
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {

            color: #7E85C2;
        }
    </style>
</head>

<body>

    <div class="register_bg">
        <div class="home_zhangdui_nav">
            <span class="goBack"></span>
            选择挑战房间
            <!-- <a href="./tradingRecord.html"> -->
            <span class="search"></span>
            <!-- </a> -->
            <div class="seachContain">
                <input class="searchContent" type="text" name="" id="" placeholder="请输入房间号">
            </div>
        </div>

        <div class="room">
            <ul>

            </ul>
        </div>

    </div>
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/public.js"></script>
    <script>
        $(function () {
            let userId
            $.post(userInfoUrl, res => {
                userId = res.obj.fdId



                $.post(tzRoomUrl, res => {
                    console.log(res.obj)
                    let obj = res.obj
                    obj.forEach((item, index) => {
                        num = item.fdNum.substring(0, 1)
                        console.log(num)

                        if (userId == item.fdCreateId) {
                            let conMy =
                                `<li class="bg_room_bottom2 my">
                    <div class="number">
                        ${num}<span class="vs"></span>${num}
                    </div>
                    <div class="room_number">
                        <img src="../../images/home/icon_team_guess_room_sofa.png" class="sofa">
                        <span>${item.fdWarName}</span>
                        
                    </div>
                    <div class='pwd'>密码:${item.fdPwd}</div>
                </li>`
                            $('ul').append(conMy)
                        } else {
                            let conOther =
                                `<li class="bg_room_bottom1">
                    <div class="number">
                        ${num}<span class="vs"></span>${num}
                    </div>
                    <div class="room_number">
                        <img src="../../images/home/icon_team_guess_room_sofa.png" class="sofa">
                        <span>${item.fdWarName}</span>
                    </div>
                </li>`
                            $('ul').append(conOther)
                        }
                        $('ul li').eq(index).click(function () {
                            // $('.name_model').fadeIn('fast')
                            console.log(item.fdId)
                            let fdId = item.fdId
                            window.location.href = `./tzzj.html?fdid=` + fdId


                        })

                    })

                })

            })

            $('.searchContent').bind('input propertychange', function () {
                $('ul').html('')
                let warNo = $('.searchContent').val()
                $.post(searchRoom, {
                    warNo
                }, res => {
                    let obj = res.obj
                    obj.forEach((item, index) => {
                        num = item.fdNum.substring(0, 1)
                        console.log(num)

                        if (userId == item.fdCreateId) {
                            let conMy =
                                `<li class="bg_room_bottom2 my">
                    <div class="number">
                        ${num}<span class="vs"></span>${num}
                    </div>
                    <div class="room_number">
                        <img src="../../images/home/icon_team_guess_room_sofa.png" class="sofa">
                        <span>${item.fdWarName}</span>
                        
                    </div>
                    <div class='pwd'>密码:${item.fdPwd}</div>
                </li>`
                            $('ul').append(conMy)
                        } else {
                            let conOther =
                                `<li class="bg_room_bottom1">
                    <div class="number">
                        ${num}<span class="vs"></span>${num}
                    </div>
                    <div class="room_number">
                        <img src="../../images/home/icon_team_guess_room_sofa.png" class="sofa">
                        <span>${item.fdWarName}</span>
                    </div>
                </li>`
                            $('ul').append(conOther)
                        }
                        $('ul li').eq(index).click(function () {
                            // $('.name_model').fadeIn('fast')
                            console.log(item.fdId)
                            let fdId = item.fdId
                            window.location.href = `./tzzj.html?fdid=` + fdId


                        })

                    })
                })
            })



        })
    </script>
</body>

</html>